|
实现过渡效果可以使用css的transition属性，但元素的height属性为auto时，transition就没有办法生效了。这时可以通过js获取元素的高度，动态设置样式。
需求描述
打开时默认隐藏内容，点击显示后平滑展开，显示内容
具体代码如下：
hello world
{{msg}}
export default {
data() {
return {
msg: '显示',
height: 0
}
},
mounted() {
// offsetHeight 是一个只读属性,它返回该元素的像素高度
this.height = this.$refs.content.offsetHeight
// 高度设置为0隐藏元素
this.$refs.content.style.height = 0
},
methods: {
toggle() {
this.msg = !!this.height ? '显示' : '隐藏'
this.$refs.content.style.height = !!this.height ? this.height + 'px' : 0
}
}
}
.card {
border: 1px solid #ebebeb;
border-radius: 3px;
transition: 0.2s;
margin-bottom: 24px;
}
.card:hover {
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
0 2px 4px 0 rgba(232, 237, 250, 0.5);
}
/*关键 transition all 0.3s linear 0*/
.content{
overflow:hidden;
transition: all 0.3s linear 0;
}
.card-operation {
font-size: 14px;
line-height: 44px;
border-top: 1px solid #eaeefb;
height: 44px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
position: relative;
}
.card-operation:hover {
background-color: #f9fafc;
color: #409eff;
}
|